import React from "react";
// import G6Editor from "@antv/g6-editor";
const G6Editor = require('../../../g6-editor/src')
import styles from "./index.less";

class Detailpanel extends React.Component {
  componentDidMount() {
    const { editor } = this.props;
    const createDetailpanel = this.getCreateDetailpanel();
    const detailpanel = createDetailpanel(this.itempanelContainer);
    editor.add(detailpanel);
  }

  getCreateDetailpanel() {
    const { createDetailpanel } = this.props;
    return createDetailpanel || this.createDetailpanel;
  }

  // eslint-disable-next-line
  createDetailpanel(container) {
    return new G6Editor.Detailpannel({
      container,
    });
  }

  render() {
    const {
      className = '', style = {},
      content,
    } = this.props;// shape
    return (
      <div
        className={`detailpanel ${styles.flowchart_detailpannel} ${className}`}
        style={style}
        ref={el => {
          this.itempanelContainer = el;
        }}
      >
        {content}
      </div>
    );
  }
}
export default Detailpanel;
